<template>
  <div id>
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="item in imglist" :key="item.id">
        <img :src="item.image" alt />
      </van-swipe-item>
    </van-swipe>

    <van-grid :column-num="3">
      <van-grid-item
        v-for="value in iconlist"
        :key="value.id"
        :icon="value.icon"
        :text="value.name"
        @click="godetail(value.id)"
      />
    </van-grid>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      imglist: [],
      iconlist: [],
    };
  },
  mounted() {
    this.$axios({
      url: "https://locally.uieee.com/slides ",
    }).then((res) => {
      this.imglist = res.data;
      // console.log(res.data);
    });

    this.$axios({
      url: "https://locally.uieee.com/categories ",
    }).then((res) => {
      this.iconlist = res.data;
      // console.log(res.data);
    });
  },
  created() {},
  methods: {
    godetail(id) {
      this.$router.push({ path: "/detail", query: { id: id } });
    },
  },
};
</script>

<style scoped lang='scss'>
img {
  width: 100%;
}
</style>